<style>
    #function_menu i {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
    }
</style>

<div id="function_menu" style="margin-left: 10px;    overflow: scroll;margin-right: 10px;min-width: fit-content;"></div>
<div id="tag_menu" style="margin-left: 10px;    overflow: scroll;margin-right: 10px;"></div>

<script>
    var component_data;

    var function_menu;
    function_menu = new render_somthing();

    var tag_menu;
    tag_menu = new render_somthing();


    var data;
    // 功能菜单
    {
        function_menu.init({
            // div的id
            id: "#function_menu",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div style="display: flex;flex-direction: row;align-items: center;min-width: 690px;"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="click_function" style="margin-left: 10px;white-space: nowrap;">
                    <span>#{title}</span>
                </div>
`,
            },
            callback: {
                click: function (res) {
                    if (res.key == "click_function") {
                        click_func_menu(res);
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [{
                    expression: "#{type}=='split'",
                    html: `
                <div style="white-space: nowrap;margin-left:5px;margin-right:5px;">
                    |
                </div>`
                },
                {
                    expression: "#{type}=='html'",
                    html: `
<div data-key='click_function'>#{html}</div>
`
                },
                {
                    expression: "#{img}!=undefined",
                    html: `
                <div class="btn_img" title="#{title}" data-key="click_function" style="margin-left: 10px;white-space: nowrap;">
                    <img class="btn_img" style="width:35px;height:35px;" src="#{img}" />
                </div>
                `
                }
            ],
        })

        data = [{
                type: "html",
                html: `<div title="组件" data-openani='popuptoleft-ani' data-closeani='closetoleft-ani' class="popupbtn_select_component"  style="margin-left:5px;margin-right:5px;">组件</div>`,
                title: "组件"
            },
            {
                type: "html",
                html: `<i title="配置组件" class="icon-button layui-icon layui-icon-slider" style="font-size:18px;margin-left:5px;margin-right:5px;"></i>`,
                title: "配置组件"
            },
            {
                type: "split"
            }, {
                type: "html",
                html: `<div  title="脚本"  style="margin-left:5px;margin-right:5px;">脚本</div>`,
                title: "脚本"
            }, {
                type: "html",
                html: `<div  title="接口"  style="margin-left:5px;margin-right:5px;">接口</div>`,
                title: "接口"
            },
            {
                type: "html",
                html: `<div  title="定位" data-openani='popuptoleft-ani' data-closeani='closetoleft-ani' class="popupbtn_location" style="margin-left:5px;margin-right:5px;">定位</div>`,
                title: "定位"
            },
            {
                type: "split"
            },
            {
                type: "html",
                html: `<i title="配置文本" class="icon-button layui-icon layui-icon-slider" style="font-size:18px;margin-left:5px;margin-right:5px;"></i>`,
                title: "配置文本"
            },
            {
                type: "html",
                html: `<i title="加粗" class="icon-button layui-icon layui-icon-fonts-strong"></i>`,
                title: "加粗"
            },
            {
                type: "html",
                html: `<i title="下划线" class="icon-button layui-icon layui-icon-fonts-u"></i>`,
                title: "下划线"
            },
            {
                type: "html",
                html: `<i title="倾斜" class="icon-button layui-icon layui-icon-fonts-i"></i>`,
                title: "倾斜"
            },
            {
                type: "split"
            },
            {
                type: "html",
                html: `<i title="左齐" class="icon-button layui-icon layui-icon-align-left"></i>`,
                title: "左齐"
            },
            {
                type: "html",
                html: `<i title="居中" class="icon-button layui-icon layui-icon-align-center"></i>`,
                title: "居中"
            },
            {
                type: "html",
                html: `<i title="右齐" class="icon-button layui-icon layui-icon-align-right"></i>`,
                title: "右齐"
            },
            {
                type: "split"
            },
            {
                type: "html",
                html: `<i title="上传图片" class="icon-button layui-icon layui-icon-picture" style="font-size:18px;margin-left:5px;margin-right:5px;"></i>`,
                title: "上传图片"
            },
            {
                type: "split"
            },
            {
                title: "padding"
            },
            {
                title: "margin"
            },
            {
                title: "段落",
                desc: "段落文字"
            },
            {
                title: "查找代码块",
                desc: "查找代码块"
            },
            // {
            //     title: "灰色",
            //     desc: "全屏所有元素变为灰色"
            // }, {
            //     title: "样式",
            //     desc: "获取选中代码样式"
            // },
        ]

        function_menu.render(data);
    }

    // 标签菜单
    {
        tag_menu.init({
            // div的id
            id: "#tag_menu",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div style="display: flex;flex-direction: row;align-items: center;"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="click_function" style="margin-left: 10px;white-space: nowrap;">
                    <span>#{title}</span>
                </div>
`,
            },
            callback: {
                click: function (res) {
                    if (res.key == "click_function") {
                        click_tag_menu(res);
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [{
                    expression: "#{type}=='split'",
                    html: `
                <div style="white-space: nowrap;margin-left:5px;margin-right:5px;">
                    |
                </div>`
                },
                {
                    expression: "#{type}=='html'",
                    html: `
<div data-key=click_function>#{html}</div>
`
                },
                {
                    expression: "#{img}!=undefined",
                    html: `
                <div class="btn_img" title="#{title}" data-key="click_function" style="margin-left: 10px;white-space: nowrap;">
                    <img class="btn_img" style="width:35px;height:35px;" src="#{img}" />
                </div>
                `
                }
            ],
        })

        data = [{
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;a&gt;</a>`,
                title: "a",
                default: "<a ></a>",
                content: 'a demo',
                style: "color:red;\n\tfont-size:16px;"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;div&gt;</a>`,
                title: "div",
                default: "<div ></div>",
                style: "color:red;\nfont-size:16px;",
                content: 'div demo'
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;img&gt;</a>`,
                title: "img",
                default: "<img src='https://www.dcdev.net/icon.png' style='width:20px;height:20px;'>"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;span&gt;</a>`,
                title: "span",
                default: "<span style='color:red;font-size:16px;'>span demo</span>",
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;script&gt;</a>`,
                title: "script",
                default: "<script>\n\n\n<\/script>",
                style: "",
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;iframe&gt;</a>`,
                title: "iframe",
                default: "<iframe src='https://www.baidu.com' frameborder='0'></iframe>",
                style: "width:100vw;\n\theight:300px;",
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;br&gt;</a>`,
                title: "br",
                default: "<br/>"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;hr&gt;</a>`,
                title: "hr",
                default: "<hr>"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;input&gt;</a>`,
                title: "input",
                default: "<input />"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;text&gt;</a>`,
                title: "text",
                default: "<text>"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;textarea&gt;</a>`,
                title: "textarea",
                default: "<textarea></textarea>"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;button&gt;</a>`,
                title: "button",
                default: "<button></button>"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;h&gt;</a>`,
                title: "h",
                default: "<h1></h1>"
            },
            {
                type: "html",
                html: `<a>&nbsp;&nbsp;&nbsp;&lt;p&gt;</a>`,
                title: 'p',
                default: "<p></p>"
            },
        ]

        tag_menu.render(data);

        function click_tag_menu(res) {
            var id = md5(new Date().getTime())
            id = 'a' + id.substr(id.length - 8, id.length)
            var content = get_selected_content();
            switch (res.value.title) {
                case 'iframe':
                case 'a':
                case 'div':
                    if (!addStyle(res.value.style, id)) {
                        var add_style_no_first_flag = true;
                    }
                    var html = $(res.value.default).attr("id", '_' + id).prop("outerHTML");
                    var script = `<script>\n$("#_${id}").html("${res.value.content}")\n<\/script>\n`
                    if (res.value.title == 'iframe') {
                        script = "";
                    }

                    insert_to_editor(`${html}\n${script}`)
                    //追踪加入
                    if (add_style_no_first_flag) {
                        var data = res.value.style;
                        var style = getComponentCode(`<style>`, `</style>`)
                        //取出 style的文本
                        var style_range = style[0].range;
                        var style = style[0].content;
                        console.log(style_range, style)
                        //去除掉标签
                        var style = style.replace(/<style>/g, "");
                        var style = style.replace(/<\/style>/g, "");
                        //添加新样式
                        var style = style + `\n#_${id}{\n\t${data}\n}\n`;
                        //添加回标签
                        var style = `<style>` + style + `\n</style>\n\n`;
                        //替换先前的标签
                        select_by_range(style_range);
                        replace_selected_content(style);
                    }
                    break;


                case 'img':
                    popup_select_img_tag.popup();
                    break;
                case 'input':
                    //页面层
                    layer.open({
                        zIndex: 9998,
                        shade: 0,
                        title: '输入框配置',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', ], //宽高
                        content: $('#input_popup')
                    });
                    break;
                case 'textarea':
                    //页面层
                    layer.open({
                        zIndex: 9998,
                        shade: 0,
                        title: '输入区域配置',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', ], //宽高
                        content: $('#textarea_popup')
                    });
                    break;
                case 'text':
                    //页面层
                    layer.open({
                        zIndex: 1000,
                        shade: 0,
                        title: '文本配置',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', ], //宽高
                        content: $('#text_popup')
                    });
                    break;
                case 'button':
                    //页面层
                    layer.open({
                        zIndex: 1000,
                        shade: 0,
                        title: '按钮配置',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', ], //宽高
                        content: $('#button_popup')
                    });
                    break;
                case 'h':
                    //页面层
                    layer.open({
                        zIndex: 1000,
                        shade: 0,
                        title: '标题配置',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', ], //宽高
                        content: $('#title_popup')
                    });
                    break;
                case 'p':
                    //页面层
                    layer.open({
                        zIndex: 1000,
                        shade: 0,
                        title: '段落配置',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', ], //宽高
                        content: $('#p_popup')
                    });
                    break;

                default:
                    insert_to_editor(`${res.value.default}\n`)
                    break;
            }

        }
    }

    /**
     * 生成一个用不重复的ID
     */
    function GenNonDuplicateID(randomLength) {
        return Number(Math.random().toString().substr(3, randomLength) + Date.now()).toString(36).substr(0, 8)
    }

    function addStyle(data, id) {
        var style = getComponentCode(`<style>`, `</style>`)
        try {
            if (style.length <= 0) {
                var first_style = `<style>\n#_${id}{\n\t${data}\n}\n<\/style>\n`
                insert_to_editor(`${first_style}`)
                return true;
            }
        } catch (error) {
            var first_style = `<style>\n#_${id}{\n\t${data}\n}\n<\/style>\n`
            insert_to_editor(`${first_style}`)
            return true;
        }

        return false;
    }
</script>

<!-- 处理菜单点击事件 -->
<script>
    var select_component_load_fist = true;

    function click_func_menu(res) {
        var content = get_selected_content();
        switch (res.value.title) {
            case "加粗":
                insert_to_editor(`<b>${content}<\/b>`)
                break;
            case "上传图片":
                insert_to_editor_image(`${content}`)
                break;
            case "右齐":
                insert_to_editor(`<div style="text-align:right;">${content}</div>`)
                break;
            case "居中":
                insert_to_editor(`<div style="text-align:center;">${content}</div>`)
                break;
            case "左齐":
                insert_to_editor(`<div style="text-align:left;">${content}</div>`)
                break;
            case "下划线":
                insert_to_editor(`<u>${content}<\/u>`)
                break;
            case "倾斜":
                insert_to_editor(`<i>${content}<\/i>`)
                break;
            case "桌面预览":
                preview_by_desktop();
                break;
            case "手机预览":
                preview_by_qrcode();
                break;
            case "padding":
                insert_to_editor(`<div style="padding:10px;">${content}</div>\n`)
                break;
            case "margin":
                insert_to_editor(`<div style="margin:10px;">${content}</div>\n`)
                break;
            case "段落":
                insert_to_editor(
                    `<!-- ${res.value.desc} -->\n<div style="padding:10px;"><pre style="font-size:14px;line-height:20px;width:100%;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;">\n${content}\n</pre></div>\n\n`
                )
                break;
            case "灰色":
                insert_to_editor(
                    `<!-- ${res.value.desc} -->\n<style>	body {		-webkit-filter: grayscale(100%);		/* webkit */		-moz-filter: grayscale(100%);		/*firefox*/		-ms-filter: grayscale(100%);		/*ie9*/		-o-filter: grayscale(100%);		/*opera*/		filter: grayscale(100%);		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);		/*ie*/		filter: gray;		/*ie9- */	}</style>\n\n`
                )
                break;
            case '组件':
                if (select_component_load_fist) {
                    //加载component_select
                    $('#component_container').load("select_component.html");
                    //select_component_load_fist = false;
                    //popup_select_component.popup();
                }
                console.log('点击')
                //页面层
                layer.open({
                    zIndex: 1000,
                    shade: 0,
                    title: '组件',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['400px', '80vh'], //宽高
                    content: $('#select_component_popup')
                });
                break;
            case '配置组件':
                //内容改变重新判断
                try {
                    setting_component_list.render(getComponentUseInfo(editor.getValue()));
                } catch (error) {}
                //popup_setting_component.popup();
                //页面层
                layer.open({
                    zIndex: 1000,
                    shade: 0,
                    title: '配置组件',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['650px', ], //宽高
                    content: $('#popup_setting_component')
                });
                break;
            case '接口':
                popup_setting_ajax.popup();
                break;
            case '定位':
                popup_select_location.popup();
                break;
            case '脚本':
                popup_insert_script.popup();
                break;
            case '查找代码块':
                if (window['dev_mode']) {
                    window['dev_mode'] = false

                    layer.msg('查找代码块已关闭，再次点击开启。');
                    editor.pushUndoStop();
                    insert_to_editor(' ');
                    editor.getModel().undo();

                } else {
                    window['dev_mode'] = true
                    layer.msg('查找代码块已开启，再次点击关闭。');
                    editor.pushUndoStop();
                    insert_to_editor(' ');
                    editor.getModel().undo();
                    //页面层
                    layer.open({
                        zIndex: 1000,
                        shade: 0,
                        title: '查找代码块',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['300px', ], //宽高
                        content: $('#dev_popup')
                    });
                };


                break;
            case '样式':
                // debugger;
                // TODO
                // 把内容写入这个insert_style.html
                popup_setting_style.popup(function () {
                    $('#_popup_setting_style_').load("insert_style.html", "", function () {
                        show_style_form();
                    });
                });
                // get_style_content();
                // show_style_form()
                break;
            case '配置文本':
                var data = get_selected_content();
                $('#text_value').val(data);
                window['text_value']=data;
                //页面层
                layer.open({
                    zIndex: 1000,
                    shade: 0,
                    title: '配置文本',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['650px', ], //宽高
                    content: $('#text_popup')
                });
                break;
            default:
                break;
        }
        // // 美化代码
        // editor.getAction(['editor.action.formatDocument'])._run();
    }

    function insert_to_editor_image(content) {
        $.getScript("https://res.dcdev.net/dcdev/v1.0.8/assets/js/crop_image.js",
            function () {
                setTimeout(() => {
                    var data = {
                        // 是否自动选择图片
                        autoSelectImg: false,
                        //canvas（图片）相关
                        movable: true, //类型,//Boolean，默认值true。是否允许移动图片
                        rotatable: true, //类型,//Boolean，默认值true。是否允许旋转图片。
                        // scalable: true,//  默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
                        zoomable: true, // 默认true, 是否允许缩放图片。
                        zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
                        zoomOnTouch: true, // 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
                        //crop(裁剪框)相关
                        //aspectRatio: 1 / 1, //裁剪框比例  默认NaN   例如:: 1 / 1,//裁剪框比例 1:1
                        modal: true, //类型:Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
                        cropBoxMovable: true, //默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小
                        autoCrop: true, //类型:Boolean，默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea:类型:Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。highlight:类型:Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
                        guides: true, //类型:Boolean，默认值true。是否在剪裁框上显示虚线。
                        center: true, // 默认true  是否显示裁剪框 中间的+ 
                        cropBoxResizable: true, //是否允许改变裁剪框的大小
                        imageInfo: function (res) { //返回所选图片的信息回调
                        }
                    };
                    crop_image.crop(data, function (res) {
                        var pid = localStorage["own_pid"];
                        if (!pid)
                            pid = "0000000000000000";
                        var url = "https://www.dcdev.net/" +
                            "lib/lib_of_back_end/v1.0.1/api/dcdev/upload/upload_image_base64.php";
                        var data = {
                            'pid': pid,
                            "storage_type": "localhost",
                            "upload_img": res,
                        };
                        $.ajax({
                            method: "post",
                            dataType: "json",
                            url: url,
                            data: {
                                params: JSON.stringify(data)
                            },
                            success: function (res) {
                                if (res["res"] == 0) {
                                    ui_class.show_error(res['tips'] ? res['tips'] : res[
                                        'desc']);
                                } else {
                                    if (res.res == 1) {
                                        insert_to_editor(
                                            `<img src="${res.data.url}" style="width:100%;">`
                                        )

                                        $("#_dc_crop_image_container_").remove()
                                        $("#_dc_crop_image_mask_").remove()
                                    }

                                }
                            }
                        })
                    })
                }, 500);
            })

    }
</script>

<!-- 用户信息相关 -->
<script>
    // 读出localstage缓存中的用户信息(如果有)
    {
        if (url_params) {
            // 有回调参数
            if (url_params.dc_login_key && url_params.dc_login_data) {
                // 保存用户信息及初体验项目信息
                user_info = JSON.parse(getDAesString(url_params.dc_login_data, url_params.dc_login_key, url_params
                    .dc_login_key))
                localStorage["own_pid"] = user_info.own_pid;
                localStorage[`user_info`] = JSON.stringify(user_info);

                // 移除回调参数再重载入
                var cb = delUrlParam(location.href, "dc_login_key");
                cb = delUrlParam(cb, "dc_login_data");
                location.href = cb;
            }
            if (url_params.id) {
                var url =
                    "https://api.dcdev.net/v1.0.1/component/get_component_by_id.php";
                var data = {
                    "component_id": url_params.id,
                }
                $.ajax({
                    method: "post",
                    dataType: "json",
                    url: url,
                    data: {
                        params: JSON.stringify(data)
                    },
                    success: function (res) {
                        if (res.res) {
                            component_data = res.data;
                            $(`#page_name`).val(component_data.desc);
                            $(`#project_my_project_headimgurl`).attr("src", component_data.headimgurl);
                            $(`#project_my_project_owner`).html(component_data.nickname);
                            // 导入框架
                            madeImport(component_data.vendor.split(","));
                        }
                    }
                })
            }
        }
        try {
            pid = localStorage["own_pid"];
            user_info = JSON.parse(localStorage[`user_info`]);
        } catch (error) {

        }

        $(`#_dc_function_panel_login_`).click(function () {
            var key = md5(new Date().getTime());
            var data = getAesString(location.href, key, key)
            location.href =
                `https://www.dcdev.net/site/dcdev/0000000000000000/pages/function/login_to_wechat.html?key=${key}&data=${data}`;
        })

        $(`#_dc_function_panel_logout_`).click(function () {
            ui_class.show_confirm(`确定要注销当前用户？`, null,
                function (res) {
                    if (res.res) {
                        window.open(
                            "https://www.dcdev.net/site/dcdev/0000000000000000/pages/function/login_to_wechat.html?logout=1"
                        );
                        localStorage.clear();
                        location.reload();
                    }
                })
        })
        if (typeof (user_info) != "undefined") {
            if (user_info) {
                $("#_dc_function_panel_headimgurl_").attr("src", user_info.headimgurl);
                $("#_dc_function_panel_nickname").html(user_info.nickname);
                $("#_dc_function_panel_login_").css("display", "none");
                $("#_dc_function_panel_logout_").css("display", "block");
            }
        } else if (localStorage["u"]) {
            user_info = JSON.parse(getDAesString(localStorage["u"], localStorage["k"], localStorage[
                "k"]));
            // 更新头像
            $("#_dc_function_panel_headimgurl_").attr("src", user_info.headimgurl);
            $("#_dc_function_panel_nickname").html(user_info.nickname);
            $("#_dc_function_panel_login_").css("display", "none");
            $("#_dc_function_panel_logout_").css("display", "block");
        }
        // 未登录
        else {
            $("#_dc_function_panel_login_").css("display", "block");
        }
    }
</script>

<!-- 预览相关 -->
<script>
    function save_code(cb) {
        if (is_setting_page) {
            save_page_code(function (res) {
                var url =
                    `https://res.dcdev.net/project/${project_info.pid}/pages/${project_info.page_id}.html`
                cb(url);
            })
        } else {
            save_component_code(function (res) {
                var url =
                    `https://www.dcdev.net/site/dcdev/0000000000000000/pages/function/preview.html?pid=${project_info.pid}&id=${component_data.component_id}`;
                cb(url);
            })
        }
    }

    // 保存页面代码
    function save_page_code(cb) {
        if (editor.getValue() == "") {
            ui_class.show_message("没有内容可供保存/预览.")
        } else {
            // 跟上次保存的内容一样
            if ((localStorage["last_code_md5"] == md5(editor.getValue())) && !cb) {
                ui_class.show_success("保存成功.")
            }
            // 内容已变更
            else {
                localStorage["last_code_md5"] = md5(editor.getValue());
                var content = editor.getValue();
                var component_desc = $(`#page_name`).val();
                content = `               
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"><\/script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"><\/script>
<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/utility.js"><\/script>
<script src="https://res.dcdev.net/dcdev/v1.0.8/assets/js/login.js" id="initClass" authorize_mode="normal"><\/script>
${content}
`
                var url =
                    "https://api.dcdev.net/v1.0.1/pages/create_page_file.php";
                var data = {
                    "pid": project_info.pid,
                    "file_name": project_info.page_id,
                    "content": content
                }
                $.ajax({
                    method: "post",
                    dataType: "json",
                    url: url,
                    data: {
                        params: JSON.stringify(data)
                    },
                    success: function (res) {
                        if (cb) {
                            cb(res)
                        } else {
                            ui_class.show_success("保存成功.", null, function (res) {})
                        }
                    }
                })
            }
        }
    }

    // 保存组件代码
    function save_component_code(cb) {
        if (editor.getValue() == "") {
            ui_class.show_message("没有内容可供保存/预览.")
        } else {
            // 跟上次保存的内容一样
            if ((localStorage["last_code_md5"] == md5(editor.getValue())) && !cb) {
                ui_class.show_success("保存成功.")
            }
            // 内容已变更
            else {

                localStorage["last_code_md5"] = md5(editor.getValue());
                var content = editor.getValue();
                var component_desc = $(`#page_name`).val();
                content = `
${content}
`
                var url =
                    "https://api.dcdev.net/v1.0.1/component/store_component.php";
                var data = {
                    "uid": user_info.uid,
                    "component_id": url_params.id,
                    "content": content,
                }
                $.ajax({
                    method: "post",
                    dataType: "json",
                    url: url,
                    data: {
                        params: JSON.stringify(data)
                    },
                    success: function (res) {
                        if (cb) {
                            cb(res)
                        } else {
                            ui_class.show_success("保存成功.", null, function (res) {})
                        }
                    }
                })
            }
        }
    }

    function copy_url() {
        save_code(function (url) {
            loadJs(
                "https://res.dcdev.net/dcdev/v1.0.8/assets/js/set_clip_board_text.js",
                function () {
                    setTextToClipboard(url);
                    ui_class.show_success("url已复制.")
                });
        })
    }

    function preview_by_desktop() {
        save_code(function (url) {
            if (browser_info.is_desktop) {
                window.open(url);
            } else {
                location.href = url;
            }
        })
    }

    function preview_by_qrcode() {
        save_code(function (url) {
            $.getScript(
                "https://res.dcdev.net/dcdev/v1.0.8/assets/js/popup_qrcode.js",
                function () {
                    popup_qrcode({
                        text: url,
                        render: "table", // 有canvas及table两种方式
                        width: 500, //设置宽度
                        height: 500, //设置高度
                        typeNumber: -
                            1, //计算模式
                        correctLevel: 0, //纠错等级
                        background: "#ffffff", //背景颜色
                        foreground: "#000000", //前景颜色
                        scale: 0.35,
                    }, 1, function () {

                    });
                    ui_class.hide_loading();
                })
        })
    }
</script>

<script>
    if (typeof (user_info) == "undefined" || !user_info) {
        $(`#_dc_function_panel_login_`).click();
    }
</script>